<template>
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item><a :href="header1Path">{{header1}}</a></el-breadcrumb-item>
          <el-breadcrumb-item><a :href="header2Path">{{header2}}</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
     <!--表格-->
      <el-table
              max-height="670"

              :data="tableData"
              style="width: 100%"
              stripe
              >
        <el-table-column
                sortable
                v-for="(titleName,index) in titleNames" :key="index"
                :prop="titleName.prop"
                :label="titleName.label">
        </el-table-column>
          <el-table-column
                  align="left">
            <div v-show="isAllowOperate">
              <template slot="header" slot-scope="scope">
                <span>操作</span>
              </template>
              <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
              </template>
            </div>

          </el-table-column>
      </el-table>
      <div>

      </div>

      <!-- 分页-->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page_total">
      </el-pagination>
    </el-card>
</template>

<script>
  export default {
     name: "View",
    props: [
      'isAllowOperate',
      'header1',
      'header2',
      'header1Path',
      'header2Path',
      'tableData',
      'titleNames',
      'page_total',
      'page'
    ],
    data() {
      return {
        tableData: this.props.tableData,
        page_total: this.props.page_total,
        search: '',
        isAllowOperate: this.props.isAllowOperate
      }
    },
    methods: {
      handleSizeChange(val) {
        this.$emit('SizeChange', val)
      },
      handleCurrentChange(val) {
        this.$emit('CurrentChange', val)
      },
      changeLoading() {
        this.loading = !this.loading
      }
    }
  }
</script>

<style scoped>

</style>
